<template>
    
    <div>
          <div class="mui-numbox" data-numbox-min='1' >
        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
        <input id="test" class="mui-input-numbox" type="number" ref="nobox" :value="init" @change="countChanged" />
        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
    {{init}} 
    </div>
</template>

<script>
import mui from '../../../lib/mui/js/mui.js'
import { mapMutations } from 'vuex'

export default {
    data() {
        return {
            
        }
    },
    mounted() {
        // 当组件挂载到页面中之后，去初始化 数字框
        mui(".mui-numbox").numbox()
    },
    methods: {
        countChanged(){
            const val = parseInt(this.$refs.nobox.value);
            // 调用mutations方法，更新数量
            this.updateGoodsCount({ id: this.id, count: val });
        },
        ...mapMutations(["updateGoodsCount"])
    },
    props: ["init","id"]
}
</script>

<style lang="scss">
// .mui-numbox{
//     height: 25px;
// }
</style>